$(function () {
    /*
     *  公式:  小图/大图=小区域/大区域
     *   只能修改小区域
     *   小区域=(小图/大图)*大区域
     *   scale= 大区域/小区域
     * */
    var $middleImg = $("#middleImg");
    var $bigImg = $("#bigImg");
    var $bigArea = $("#bigArea");
    $("#smallArea").css({
        width: ($middleImg.width() / $bigImg.width()) * $bigArea.width(),
        height: ($middleImg.height() / $bigImg.height()) * $bigArea.height()
    })
    $middleImg.on("mouseenter", function () {
        $("#smallArea").show();
        $bigArea.show();
    }).on("mouseleave", function () {
        $("#smallArea").hide();
        $bigArea.hide();
    }).on("mousemove", function (e) {

        var mx = e.pageX - $(this).offset().left - $("#smallArea").width() / 2;
        var my = e.pageY - $(this).offset().top - $("#smallArea").height() / 2;
        if (mx <= 0) {
            mx = 0
        }
        if (mx >= $middleImg.width() - $("#smallArea").width()) {
            mx = $middleImg.width() - $("#smallArea").width()
        }
        if (my <= 0) {
            my = 0
        }
        if (my >= $middleImg.height() - $("#smallArea").height()) {
            my = $middleImg.height() - $("#smallArea").height()
        }
        $("#smallArea").css({
            left: mx,
            top: my
        })
        var oscale = $bigArea.width() / $("#smallArea").width()

        $bigImg.css({
            left: oscale * -mx,
            top: oscale * -my

        })
    })
    $("#middleImg").on("mouseleave", function (evt) {
        var e = evt || window.event;
        $("#bigArea").css("display", "none");
        $("#smallArea").css("display", "none");
        $(document).onmousemove = null;
    });
    var $olis = $("#small").children(0).children();
    console.log($olis);
    for (var i = 0; i < $($olis).length; i++) {

        $($olis)[i] = i;
        $($olis)[i].onmouseenter = function () {
            var index = $(this).index() + 1;
            console.log($($olis)[i]);
            console.log(index);
            $(this).css({
                border: "1px solid red"
            }).siblings().css("border", "");
            $("#middleImg").children(0).attr("src", "images/image/" + "middle_" + index + ".jpg")
            $("#bigImg").attr("src", "images/image/" + "big_" + index + ".jpg")
        }
    }
    var $btn = $(".contain3-righttop").children();
    var $mages = $(".contain3-rightbottom").children();
    console.log($btn.length)
    for (var i = 0; i < $btn.length; i++) {
        $($btn)[i] = i;
        console.log($($btn)[i])
        $($btn)[i].onclick = function () {
            var tmpindex = $(this).index()
            console.log(tmpindex);
            console.log($($mages)[tmpindex]);
            $($mages).eq(tmpindex).show().siblings().hide();
            $(this).css({
                backgroundColor: "#ffffff"
            }).siblings().css({
                backgroundColor: ""
            });
        }
    }
    //获得文本框对象
    var t = $("#inpu");
    //初始化数量为1,并失效减
    $('.num_pre').attr('disabled', true);
    //数量增加操作
    $(".num_pre").click(function () {
        // 给获取的val加上绝对值，避免出现负数
        console.log(t.val());
        t.val(Math.abs(parseInt(t.val())) + 1);
        if (parseInt(t.val()) != 1) {
            $('.num_next').attr('disabled', false);
        };
    })
    //数量减少操作
    $(".num_next").click(function () {
        t.val(Math.abs(parseInt(t.val())) - 1);
        if (parseInt(t.val()) == 1) {
            $('.num_next').attr('disabled', false);
        };
    })

    // console.log($(".add-one"));
    // console.log(222);
    // console.log($("#inpu").val())
    // $(".add-one").click(function(){
    //     console.log(111);
    //     // $(".itme").css("display","block");
    // })
    $(document).on("click", ".add-one", function () {
        if (!window.localStorage.getItem("currentUser")) {
            layer.msg("请先登录");
            return
        } else {
            $(".itme").show();
            $(".tvalue").attr("value", $("#inpu").val());
        }


    })

})